<template>

    <el-form
              ref="formRef"
              size="large"
              autocomplete="off"
              :model="passwordInfo"
              :rules="rulesPwd"
              label-width="100px"
            >
              <el-form-item label="当前密码" prop="old_pwd">
                <el-input v-model="passwordInfo.old_pwd"  type="password"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="new_pwd">
                <el-input v-model="passwordInfo.new_pwd"  type="password"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="re_pwd">
                <el-input v-model="passwordInfo.re_pwd"  type="password"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  class="button"
                  type="primary"
                  auto-insert-space
                  @click="updatePwd"
                  >提交</el-button
                >
              </el-form-item>
            </el-form>
    </template>
    <script setup>
    import { ref, reactive} from 'vue'
    import{useTokenStore} from '@/stores/token.js'
    import { ElMessage } from 'element-plus';
    import router from '@/router/index.js'
import { xiugaishanghu } from '@/api/user';
    
    const passwordInfo=ref({});
    const mima = useTokenStore().token.password;// 登录成功的密码
    passwordInfo.value.id=useTokenStore().token.id;
    // passwordInfo.value.username=useTokenStore().token.username;
    passwordInfo.value.password=useTokenStore().token.password;
    
    
    const formRef=ref(null);// 强制校验使用
    
    // 点击提交按钮
    const updatePwd=()=>{
        formRef.value.validate((valid)=>{
    xiugaimi();
    
            if(valid){
                alert('校验通过')
            }else{
                alert('校验失败');
                
            }
        })
    }
    //保存的方法
    const xiugaimi=async()=>{
        passwordInfo.value.password=passwordInfo.value.new_pwd;//把值给到表单的方法中
        
      let mi= await xiugaishanghu (passwordInfo); 
      console.log(mi)
      if(mi.flag){
        ElMessage.success("修改成功,请重新登陆")
        useTokenStore().removeToken
       passwordInfo.value.password= useTokenStore().token.password;
       useTokenStore().token.password=passwordInfo.value.re_pwd;
        router.push("/")
      }
    
    }
    
    // 验证旧密码是否和登录成功的密码一致
    const xx=(rule, value, callback) => {
        useTokenStore().token.removeToken;
      if (value!=mima ) {
        return callback(new Error("密码输入有误"));
      } else {
        callback();
      }
    };
    
    // 确认密码和新密码是否一致
    const yy=(rule, value, callback) => {
      if (value!=passwordInfo.value.new_pwd ) {
        return callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    
    const rulesPwd={
       old_pwd: [
              // blur失去焦点    focus 获得焦点
             { required: true, message: '请输入旧密码', trigger: 'blur' },
             { min: 6, max: 10, message: '密码必须为6~10位的非空字符', trigger: 'blur' },
             // 我们要判断输入的旧密码是否正确 咱们要和token中的密码比较
             { validator: xx, trigger: "blur" }
    
        ],
        new_pwd:[
             { required: true, message: '请输入新密码', trigger: 'blur' },
             { min: 6, max: 10, message: '新密码必须为6~10位的非空字符', trigger: 'blur' }
        ],
        re_pwd:[
            { required: true, message: '请输入确认密码', trigger: 'blur' },
             { min: 6, max: 10, message: '确认密码必须为6~10位的非空字符', trigger: 'blur' },
             { validator: yy, trigger: "blur" }
        ]
    }
    
    </script>
    
    
    <style lang='scss' scoped>
    
    </style>